<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NexMagic Scholar</title>
    <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">
    <style>
        body {
            background: url("../img/scholar/orgScholar-bg.png") left top repeat;
        }

        .scholar-ul {
            padding: 0 0 0 35px;
        }

        .scholar-ul li {
            padding: 7px 0;
            font-size: 18px;
            cursor: pointer;
            list-style-type: disc;
        }

        .scholar-ul li a {
            color: #676a6c;
        }

        .scholar-ul li a:hover {
            color: orange;
            text-decoration: underline;
        }

        #box {
            padding-top: 5%;
        }

        .scholar-list h4 {
            font-weight: 600;
            display: inline-block;
            font-size: 18px;
        }

        .scholar-list h1 {
            font-weight: 600;
            font-size: 33px;
        }

        .scholar-list .top-professors {
            margin: 18px 0;
            display: inline-block;
        }

        .main {
            position: relative;
        }

        .main .title {
            height: 40px;
            width: 100%;
            border: 1px solid #ddd;
            background-color: #f5f5f5;

            font-weight: 700;
            color: #337ab7;
            font-size: 15px;
            line-height: 40px;

            padding: 0 35px;

            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .main #network {
            width: 100%;
            height: 620px;

            background-color: #fff;
            border: 1px solid #ddd;
            border-top-width: 0;
        }

        .main .float-menu {
            position: absolute;

            top: 5px;
            left: 30px;

            width: 200px;

            padding: 60px 0;
        }

        .main .float-menu .scholar-info {
            background-color: #325d88;
            border-radius: 5px;
            box-shadow: 2px 2px 2px #888888;

            color: #fff;
            padding: 15px;
            width: 100%;

            font-size: 14px;
        }

        .scholar-info ul li {
            text-align: center;
        }

        .scholar-info .scholar-info-title {
            font-size: 18px;
        }

        .scholar-info span {
            display: inline-block;
        }
    </style>
</head>
<body>
<div id="box">
    <diV class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-2 scholar-list">
            <h2 style="font-weight: 600">{{orgName}}</h2>
            <span class="top-professors">
                <i class="fa fa-user" style="font-size: 18px"></i>
                <h4>Top Professors</h4>
            </span>
            <ul class="scholar-ul">
                <li v-for="scholar in scholarList"><a @click="searchByName(scholar.id)">{{scholar.name}}</a></li>
            </ul>
        </div>
        <div class="col-sm-6">
            <div class="main">
                <div class="title">Author Map [Full View]</div>
                <div id="network"></div>
                <div class="float-menu">
                    <!--<div class="search-box">
                        <input>
                        <div class="search-btn">Search</div>
                    </div>-->
                    <div class="scholar-info">
                        <p class="scholar-info-title">{{orgName}}</p>
                        <span>Author Map</span>
                        <span>Total number of papers: {{totalPaperNum}}</span>
                        <span>Total number of authors: {{scholarList.length}}</span>
                        <!--<ul>
                            <li>COLORING</li>
                            <li>TOP 5</li>
                            <li>FIELD FILTER</li>
                        </ul>-->
                    </div>
                </div>
            </div>
        </div>
    </diV>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/layer/layer.js"></script>
<script src="../js/polyfill.min.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/echarts/echarts.min.js"></script>
<script src="../js/gAjax.js"></script>
<script>
    var netWorkChart;
    var kingVue = new Vue({
        el: '#box',
        data: {
            orgName: "",
            totalPaperNum: 0,
            scholarList: []
        },
        mounted: function () {
            var _this = this;
            _this.orgName = getUrlParam("orgName");
            netWorkChart = echarts.init(document.getElementById("network"));
            _this.queryScholarsByOrg(_this.orgName);
        },
        methods: {
            queryScholarsByOrg: function (orgName) {
                var _this = this;
                gAjax.request("expert/getExpertByOrg", {orgName: orgName}).then(function (result) {
                    _this.scholarList = result;
                    _this.initNetworkChart(orgName);
                });
            },
            searchByName: function (scholarId) { /*根据学者名字再查询*/
                console.log(scholarId)
                if (scholarId != null) {
                    console.log(scholarId.id);
                    window.open("analysis.html?scholarId=" + scholarId);
                }
            },
            initNetworkChart: function (orgName) {
                var _this = this;
                gAjax.request("expert/getRelateExpertByOrg", {orgName: orgName}).then(function (result) {
                    var graph = {nodes: [], links: []};
                    var i = 0, j = 0;
                    var nodesMap = {}, totalPaperNum = 0;
                    _this.scholarList.forEach(function (item) {
                        var pNum = item["pnum"] != undefined ? item["pnum"] : 0;
                        totalPaperNum += pNum;
                        if (!nodesMap[item["name"]]) {
                            nodesMap[item["name"]] = i++;
                            var sourceNode = {
                                id: nodesMap[item["name"]],
                                name: item["name"],
                                symbolSize: (pNum + 10) > 40 ? 40 : (pNum + 10),
                                label: {
                                    show: true
                                },
                                /*draggable: true*/
                            };
                            graph.nodes.push(sourceNode);
                        }
                    });
                    _this.totalPaperNum = totalPaperNum;

                    result.forEach(function (item) {
                        nodesMap[item["e1.name"]] = i++;
                        var targetNode = {
                            id: nodesMap[item["e1.name"]],
                            name: item["e1.name"],
                            itemStyle: {
                                color: "#0000ff"
                            },
                            /**/
                        };
                        graph.nodes.push(targetNode);
                        var link = {
                            id: j++,
                            source: nodesMap[item["e.name"]],
                            target: nodesMap[item["e1.name"]]
                        };
                        graph.links.push(link);
                    });
                    var option = {
                        tooltip: {},
                        animation: true,
                        series: [{
                            type: 'graph',
                            layout: 'force',
                            data: graph.nodes,
                            links: graph.links,
                            draggable: true,
                            focusNodeAdjacency: true,
                            symbolSize: 10,
                            roam: true,
                            label: {
                                normal: {
                                    position: 'right',
                                    color: "#000"
                                }
                            },
                            force: {
                                repulsion: 50,
                                edgeLength: 50,
                                gravity: 0.03
                            },
                            lineStyle: {
                                curveness: 0.3,
                                color: "#444"
                            },
                            emphasis: {
                                lineStyle: {
                                    width: 5
                                }
                            }
                        }]
                    };
                    netWorkChart.setOption(option);
                });
            }

        }
    });
</script>
</body>
</html>